<template>
	<view style="padding:20upx 30upx">
		<u-picker mode="time" v-model="timeShow" :params="params" @confirm="timeConfirm"></u-picker>
		<u-picker mode="time" v-model="retimeShow" :params="params" @confirm="retimeConfirm"></u-picker>
		<u-picker mode="time" v-model="acttimeShow" :params="params" @confirm="acttimeConfirm"></u-picker>
		<u-select v-model="regionShow" mode="mutil-column-auto" :list="listAddress" @confirm="confirm"></u-select>
		<u-form :model="form" ref="uForm" label-width="130">
			<u-form-item label="逝者" prop='name'>
				<u-input v-model="form.name" />
			</u-form-item>
			<u-form-item label="逝世日期" prop='time'>
				<u-input :select-open="timeShow" v-model="form.time" placeholder="请选择逝世日期" @click="timeShow = true">
				</u-input>
			</u-form-item>
			<u-form-item label="下葬日期" prop='retime'>
				<u-input type="select" :select-open="retimeShow" v-model="form.retime" placeholder="请选择下葬日期"
					@click="retimeShow = true"></u-input>
			</u-form-item>
			<u-form-item label="墓碑位置">
				<u-input type="select" :select-open="regionShow" v-model="form.address" placeholder="请选择墓碑位置"
					@click="regionShow = true"></u-input>
			</u-form-item>
			<u-form-item label="扫墓时间">
				<u-input type="select" :select-open="acttimeShow" v-model="form.acttime" placeholder="请选择扫墓时间"
					@click="acttimeShow = true"></u-input>
			</u-form-item>
			<u-form-item label="套餐" prop='sex'>
				<u-radio-group v-model="form.sex">
					<u-radio name="1">
						<view class="taca">
							<view class="title">
								标准套餐
							</view>
							<view class="indeco">
								（一束鲜花，一对蜡烛，一捧香火）
							</view>
						</view>
					</u-radio>
					<u-radio name="2">
						<view class="taca">
							<view class="title">
								豪华套餐（￥599）
							</view>
							<view class="indeco">
								(一束鲜花，一对蜡烛，一捧香火)
							</view>
						</view>
					</u-radio>
				</u-radio-group>
			</u-form-item>
		</u-form>
		<view class="subBtn">
			<button type="primary" size="mini" @click="submit">提交</button>
		</view>
	</view>
</template>

<script>
	export default {
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		data() {
			return {
				timeShow: false,
				regionShow: false,
				retimeShow: false,
				acttimeShow: false,
				rules:{
					name:[{
						type:"string",
						require:true,
						message:'请重新填写名称'
					}],
					time:[{
						require:true,
						message:'请输入逝世日期'
					}],
					retime:[{
						require:true,
						message:'请输入下葬日期'
					}],
					sex:[{
						require:true,
						message:'请选择套餐'
					}]
					
				},
				form: {
					name: "",
					intro: '',
					sex: '1',
					nameof: '',
					time: '',
					address: '',
					retime: "",
					acttime: ''
				},
				params: {
					year: true,
					month: true,
					day: true,
					hour: false,
					minute: false,
					second: false
				},
				listAddress: [{
					label: '青竹镇',
					value: '1',
					children: [{
						label: 'A区',
						value: '11',
						children: [{
							label: '1排',
							value: '111',
							children: [{
								label: '20号',
								value: '1111',
							}]
						}]
					}]
				}]
			}
		},
		methods: {
			confirm(e) {
				console.log(e);
				let a = ''
				this.form.address = e.reduce(function(pre, next, index) {
					if (index == 0) {
						return pre + next.label
					} else {
						return pre + '-' + next.label
					}
				}, a)
			},
			timeConfirm(e) {
				console.log(e)
				this.form.time = e.year + '-' + e.month + '-' + e.day
			},
			acttimeConfirm(e) {
				this.form.acttime = e.year + '-' + e.month + '-' + e.day
				console.log(e)
			},
			retimeConfirm(e) {
				this.form.retime = e.year + '-' + e.month + '-' + e.day
				console.log(e)
			},

			// 跳转 个人中心页面
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
					} else {
						console.log('验证失败');
					}
				});
				uni.switchTab({
					url: '/pages/view/center/center'
				})
				console.log('跳转 个人中心页面')
			}
		}
	}
</script>

<style scoped>
	.subBtn {
		text-align: center;
		margin: 50upx auto;
	}

	.indeco {
		color: rgb(127, 77, 18);
	}

	.taca {
		padding: 15upx;
	}
</style>
